<template>
  <div>
    <!-- 应用门店-->
    <el-dialog
      title="应用门店"
      :visible.sync="applydialogVisible"
      width="600px"
      class="no-dialog-padding"
    >
      <span class="stores_dialog">
        <div class="left_side">
          <div class="ipt_box">
            <input
              type="text"
              v-model="StoresValue"
              placeholder="请输入门店名称"
            />
          </div>
          <div class="side_item">
            <div
              v-for="(item, index) in storesList"
              :key="index"
              @click="SelectStores(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="right_side">
          <!-- <div class="ipt_box">
            <input
              type="text"
              v-model="SelectedValue"
              placeholder="请输入门店名称"
            />
          </div> -->
          <div class="selected_stores">已选门店</div>
          <div class="side_item">
            <div
              v-for="(ite, index) in SelectstoresList"
              :key="index"
              @click="backItem(index)"
            >
              {{ ite.name }}
              <span class="delete_item" @click="deleItem(index)">X</span>
            </div>
          </div>
        </div>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="SelectAll">全选</el-button>
        <el-button type="primary" @click="CancleAll">取消选中</el-button>
        <el-button @click="Cancleapply">取 消</el-button>
        <el-button type="primary" @click="Submitapply">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getStoresInfoList } from "@/api/business/project";
export default {
  name: "Stores",

  data() {
    return {
      applydialogVisible: false,
      StoresValue: "",
      SelectedValue: "",
      NewSearch: [],
      storesList: [
        // {
        //   name: "xx",
        //   value: 1,
        // },
      ],
      SelectstoresList: [],
      storesAllList: [],
      storesAllLists: [],
      // StoresList:[],  // 门店列表
    };
  },

  watch: {
    StoresValue: function (newValue, oldValue) {
      let NewSelect = this.SelectstoresList.map((item)=>{
        return item.id
      });
      console.log("Asa",NewSelect);

      let NewSearchData = [];
      for (let index = 0; index < this.storesAllList.length; index++) {
        const element = this.storesAllList[index];
        if(NewSelect.includes(element.id) === false){
          NewSearchData.push(element);
        }
      }
      
      // this.SelectstoresList = NewSelect;
      
      if (newValue === "") {
        this.storesList = JSON.parse(JSON.stringify(NewSearchData));
        return false;
      }

      let NewSearch = [];
      for (let i = 0; i < NewSearchData.length; i++) {
        let Item = NewSearchData[i];
        if (Item.name.indexOf(this.StoresValue) > -1) {   // >-1 b
          NewSearch.push(Item);
        }
      }
      this.storesList = NewSearch;
    },
  },

  created() {},

  mounted() {},

  methods: {
    // 全选
    SelectAll() {
      this.SelectstoresList = JSON.parse(JSON.stringify(this.storesAllLists));
      this.storesList = [];
    },

    // 取消全选
    CancleAll() {
      this.SelectstoresList = [];
      this.storesList = JSON.parse(JSON.stringify(this.storesAllLists));
    },

    getStoresList() {
      this.loading = true;
      let NewStores = [];
      getStoresInfoList({})
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            // this.storesList = data;
            // this.storesAllList = data;

            let ids = this.SelectstoresList.map((item) => {
              return item.id;
            });
            let Arr = [];
            for (let i = 0; i < data.length; i++) {
              let Items = data[i];
              if (ids.indexOf(Items["id"]) === -1) {
                Arr.push(Items);
              }
            }
            this.storesList = Arr;
            this.storesAllList = Arr;
            this.storesAllLists = JSON.parse(JSON.stringify(data));
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    applyStore(list) {
      if (!!list) {
        this.SelectstoresList = JSON.parse(JSON.stringify(list));
      }
      this.applydialogVisible = true;
    },

    SelectStores(index) {
      this.SelectstoresList.push(this.storesList[index]);
      this.storesList.splice(index, 1);
    },

    backItem(index) {
      this.storesList.push(this.SelectstoresList[index]);
      this.SelectstoresList.splice(index, 1);
    },

    Cancleapply() {
      this.applydialogVisible = false;
    },
    Submitapply() {
      this.applydialogVisible = false;
      let Name = [];
      let Id = [];
      for (let i = 0; i < this.SelectstoresList.length; i++) {
        Name.push(this.SelectstoresList[i].name);
        Id.push(
          !!this.SelectstoresList[i].value
            ? this.SelectstoresList[i].value
            : this.SelectstoresList[i].id
        );
      }

      let obj = {
        storeName: Name.join(","),
        storeId: Id,
        list: this.SelectstoresList,
      };
      this.$emit("change", obj);
    },
    // 新增分类
    AddSort() {
      this.dialogVisible = true;
      this.title = "新建分类";
    },
  },
};
</script>

<style lang="scss" scoped>
.stores_dialog {
  display: flex;
  .left_side {
    width: 50%;
    padding: 20px;
    .ipt_box {
      input {
        width: 100%;
        height: 30px;
        border: 1px solid #ccc;
        outline: none;
      }
    }
    .side_item {
      div {
        margin-top: 10px;
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        &:hover {
          background-color: #0079fe;
          color: #fff;
        }
      }
    }
  }
  .right_side {
    width: 50%;
    padding: 20px;
    .ipt_box {
      input {
        width: 100%;
        height: 30px;
        border: 1px solid #ccc;
        outline: none;
      }
    }
    .selected_stores {
      color: #ccc;
      margin-top: 10px;
    }
    .side_item {
      div {
        margin-top: 10px;
        .delete_item {
          float: right;
        }
      }
    }
  }
}
</style>
